<template>
    <el-card style="max-width: 800px" class="m-4">
      <template #header>
        <div class="card-header">
          <div class="font-bold">总分</div>
          <div class="flex items-center space-x-4">
            <div class="text-4xl font-bold">444分</div>
            <div class="text-gray-500 text-center text-sm">满分:580</div>
          </div>
        </div>
      </template>
      
      <!-- 左边的盒子 -->
      <div class="flex ">
        <div class="space-y-2">
          <template v-for="(subject, index) in leftSubjects" :key="index">
            <div class="flex items-center space-x-2">
              <div class="flex items-baseline space-x-1 my-1">
                <div>{{ subject.name }}</div>
                <div class="text-lg font-bold">{{ subject.score }}</div>
                <div class="text-gray-500 text-sm">/ {{ subject.fullScore }}</div>
              </div>
              <div 
                v-if="subject.score / subject.fullScore >= 0.9" 
                class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
                优秀
              </div>
              <div 
                v-else-if="subject.score / subject.fullScore < 0.6" 
                class="bg-red-100 text-red-700 text-xs px-2 py-1 rounded-full">
                偏科
              </div>
            </div>
          </template>
        </div>
  
        <!-- 右边的盒子 -->
        <div class="space-y-2 ml-40">
          <template v-for="(subject, index) in rightSubjects" :key="index">
            <div class="flex items-center space-x-2">
              <div class="flex items-baseline space-x-1 my-1">
                <div>{{ subject.name }}</div>
                <div class="text-lg font-bold">{{ subject.score }}</div>
                <div class="text-gray-500 text-sm">/ {{ subject.fullScore }}</div>
              </div>
              <div 
                v-if="subject.score / subject.fullScore >= 0.9" 
                class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
                优秀
              </div>
              <div 
                v-else-if="subject.score / subject.fullScore < 0.6" 
                class="bg-red-100 text-red-700 text-xs px-2 py-1 rounded-full">
                偏科
              </div>
            </div>
          </template>
        </div>
      </div>
  
     
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // 响应式数据：语数外物化生史政地的成绩
  const scores = ref([
    { name: '语文', score: 100, fullScore: 150 },
    { name: '数学', score: 140, fullScore: 150 },
    { name: '英语', score: 130, fullScore: 150 },
    { name: '物理', score: 90, fullScore: 100 },
    { name: '化学', score: 85, fullScore: 100 },
    { name: '生物', score: 60, fullScore: 100 },
    { name: '历史', score: 55, fullScore: 100 },
    { name: '政治', score: 95, fullScore: 100 },
    { name: '地理', score: 88, fullScore: 100 }
  ])
  
  // 将科目成绩分为左右两部分
  const leftSubjects = scores.value.slice(0, 5) // 前五个科目
  const rightSubjects = scores.value.slice(5) // 后四个科目
  </script>
  